<!--
 * @Author: 大辉 dbstt@qq.com
 * @Date: 2023-06-13 20:18:09
 * @LastEditors: 大辉 dbstt@qq.com
 * @LastEditTime: 2023-06-14 08:34:51
 * @FilePath: /blog/test3.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>
  <head>
    <title>Web Component Demo</title>
    <!-- <script>
      // 定义自定义组件
      class MyComponent extends HTMLElement {
        constructor() {
          super();

          // 创建一个影子根节点
          const shadowRoot = this.attachShadow({ mode: 'open' });

          // 创建组件内部的HTML内容
          const template = document.createElement('template');
          template.innerHTML = `
            <style>
              .message {
                display: none;
                background-color: yellow;
                padding: 10px;
                margin-top: 10px;
              }
            </style>
            <button>显示消息</button>
            <div class="message">这是一个提示消息</div>
          `;

          // 将模板内容添加到影子根节点
          shadowRoot.appendChild(template.content.cloneNode(true));

          // 获取组件内部的按钮和消息元素
          const button = shadowRoot.querySelector('button');
          const message = shadowRoot.querySelector('.message');

          // 在按钮上添加点击事件处理程序
          button.addEventListener('click', () => {
            message.style.display = 'block';
          });
        }
      }

      // 将自定义组件注册为"my-component"
      customElements.define('my-component', MyComponent);
    </script> -->
    <style>
      .box {
        width: 200px;
        height: 200px;
        margin-top: 50px;
        border: 1px solid red;
      }

      .child {
        /* width:100px;
            height:100px; */
        margin-top: 50px;
        /* border: 1px solid green; */
        background-color: green;
      }
    </style>
  </head>
  <body>
    <!-- 在页面中使用自定义组件 -->
    <!-- <my-component></my-component> -->
    <div class="box">
      <div class="child">1</div>
    </div>

    <script>
      // 主题对象
      class Subject {
        constructor() {
          this.observers = []; // 观察者列表
        }

        // 添加观察者
        addObserver(observer) {
          this.observers.push(observer);
        }

        // 删除观察者
        removeObserver(observer) {
          const index = this.observers.indexOf(observer);
          if (index !== -1) {
            this.observers.splice(index, 1);
          }
        }

        // 通知观察者
        notifyObservers() {
          this.observers.forEach((observer) => {
            observer.update();
          });
        }
      }

      // 具体主题对象
      class Button extends Subject {
        constructor() {
          super();
          this.clicked = false; // 按钮的状态
        }

        // 按钮被点击时更新状态并通知观察者
        click() {
          this.clicked = true;
          this.notifyObservers();
        }
      }

      // 观察者对象
      class Observer {
        constructor(name) {
          this.name = name;
        }

        // 观察者收到通知后执行操作
        update() {
          console.log(`${this.name} 收到通知，执行相应操作`);
        }
      }

      // 创建主题和观察者
      const button = new Button();
      const observer1 = new Observer("Observer 1");
      const observer2 = new Observer("Observer 2");

      // 注册观察者
      button.addObserver(observer1);
      button.addObserver(observer2);

      // 模拟按钮点击事件
      button.click();
    </script>
  </body>
</html>
